<template>
  <div class="index">
    <!-- 搜索框 -->
    <div class="search-box" style="margin-bottom: 3.3%">
      <van-search
        class="search_font"
        v-model="search_value"
        shape="round"
        background="#f1bf83"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </div>
    <!-- 信息发布 -->
    <div class="user_message" v-for="(message, i) in messageList" :key="i" v-lazy="message">
      <van-row>
        <van-col :span="4">
          <van-image
            class="user_img"
            round
            width="2.5rem"
            height="2.5rem"
            :src="message.user_url"
          />
        </van-col>
        <!-- 用户信息 -->
        <van-col :span="20">
          <van-row type="flex" justify="space-between">
            <van-col :span="14"
              ><div class="user_name">{{ message.username }}</div></van-col
            >
            <van-col :span="10"
              ><div class="user_time">
                {{ message.pub_date | newDate("YYYY-MM-DD  HH:mm:ss") }}
              </div></van-col
            >
          </van-row>
        </van-col>
      </van-row>
      <!-- 照片描述 -->
      <van-row>
        <van-col :span="4"> </van-col>
        <van-col :span="20">
          <div class="message">{{ message.pub_des }}</div>
        </van-col>
      </van-row>
      <van-row>
        <van-col :span="4"> </van-col>
        <!-- 照片展示 -->
        <van-col :span="20">
          <van-row type="flex" gutter="10">
            <van-col
              span="8"
              v-for="(url, index) in message.pub_img"
              :key="index"
              v-lazy="url"
            >
              <van-image width="6em" height="6em" :src="url" class="v-img" />
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row>
        <van-col :span="4"> </van-col>
        <van-col :span="20">
          <van-row>
            <!-- 是否喜欢 -->
            <van-col :span="8">
              <van-checkbox v-model="likeChecked">
                <span>喜欢</span>
                <template #icon="props">
                  <img
                    class="img-icon"
                    :src="props.checked ? activeLike : inactiveLike"
                  />
                </template>
              </van-checkbox>
            </van-col>
            <!-- 评论 -->
            <van-col :span="8">
              <van-checkbox v-model="desChecked">
                <span>评论</span>
                <template #icon="props">
                  <img
                    class="img-icon"
                    :src="props.checked ? activeDes : inactiveDes"
                  />
                </template>
              </van-checkbox>
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row>
        <van-col :span="4"> </van-col>
        <van-col :span="20">
          <!-- 是否喜欢及评论 -->
          <!-- <div class="show_des">
            <van-row>
              <van-col :span="10">
                <van-checkbox v-model="check">
                  9人喜欢
                  <template #icon="props">
                    <img
                      class="img-icon"
                      :src="props.checked ? activeDes : inactiveDes"
                    />
                  </template>
                </van-checkbox>
              </van-col>
            </van-row>
            <div style="border-bottom: 1px solid #fff; margin-top: 5px"></div>
            <div>
              <ul class="mess_des">
                <li>
                  <span style="color: #000">name</span>：
                  <span style="color: #f5f5f5">descript</span>
                </li>
              </ul>
            </div>
          </div> -->
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //获取搜索框内容
      search_value: "",
      // 是否评论、喜欢
      likeChecked: true,
      desChecked: true,
      // check: true,
      // 喜欢的图片
      activeLike: require("../../static/images/like-full-icon.png"),
      inactiveLike: require("../../static/images/like-icon.png"),
      // 评论的图片
      activeDes: require("../../static/images/comment-icon.png"),
      inactiveDes: require("../../static/images/comment-icon.png"),
      // 信息发布区
      messageList: [],
    };
  },
  created() {
    this.getIndexMessage();
  },
  methods: {
    async onSearch(val) {
      if (val) {
        const res = await this.request.post("/index", {
          value: val.concat("%"),
        });
        console.log(res);
        if (res.status != 0) {
          return this.$toast("没查询到相关内容!");
        } else {
          console.log(res);
          this.messageList = null;
          this.messageList = res.data;
        }
      } else {
        this.getIndexMessage();
      }
    },
    onCancel() {
      this.messageList = null;
      this.getIndexMessage();
    },
    async getIndexMessage() {
      const res = await this.request.get("/index");
      if (res.status !== 0) {
        this.$toast("暂无多余数据");
      } else {
        this.messageList = res.data;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.index {
  width: 750rpx;
  height: 100%;
  margin: 0 auto;

  .search-icon {
    width: 7.2%;
    position: absolute;
    top: 2%;
    right: 6.4%;
  }

  .van-search__content {
    background-color: transparent;

    /deep/ .van-field__left-icon {
      display: none;
    }

    /deep/ .van-field__control::-webkit-input-placeholder {
      color: rgb(214, 153, 122);
    }
  }

  .search_content {
    top: 13.9%;
    width: 90%;
    // height: 150px;
    margin: 0 auto;
    border: 0.5px solid #ccc;
    box-shadow: 1px 1px 3px #ccc;
    border-top: 0;
    padding: 5px;

    .van-col {
      text-align: center;
      margin: 5px 0;
    }

    .van-tag--large {
      border-radius: 3.8%;
    }
  }

  .user_message {
    width: 100%;
    box-sizing: border-box;
    min-height: 330px;
    padding: 3.3% 5.5%;

    .van-col--4 {
      width: 12.2%;
      margin-right: 2.5%;
    }
    .user_img {
      border-radius: 50%;
    }
    .user_name {
      float: left;
      // height: 50px;
      line-height: 50px;
      font-weight: 600;
    }
    .user_time {
      float: right;
      // height: 50px;
      line-height: 50px;
      color: rgb(143, 142, 142);
      font-size: 0.8em;
    }

    /deep/ .v-img img {
      border-radius: 5% !important;
    }

    .van-col--20 {
      margin-bottom: 3.9%;
    }
    .img-icon {
      height: 20px;
    }
    .show_des {
      position: relative;
      // height: 100px;
      border-radius: 10px;
      background-color: #ccc;
      opacity: 0.8;
      margin-top: 10px;
      padding: 10px;

      &::before {
        content: "";
        display: block;
        position: absolute;
        top: -10px;
        left: 30px;
        width: 0;
        height: 0;
        overflow: hidden;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid #ccc;
        opacity: 0.8;
      }
    }
  }
}
</style>